
<template>
 <div id="personalContainer">
   <view class="my-profile">
     <view class="profile-header">
       <image class="avatar" :src="user.avatarUrl" mode="aspectFill"></image>
       <button class="niceButton2" open-type="getUserInfo" @getuserinfo="handleGetUserInfo" style="background-color: white">{{ user.nickName?user.nickName : '点击登录/注册' }}</button>
     </view>
   </view>
   <view class="profile-content">
     <view class="info-container">
       <text class="info">Email: {{ user.email }}</text>
     </view>
     <view class="info-container">
       <text class="info">Phone: {{ user.phone }}</text>
     </view>
     <view class="info-container">
       <el-button @click="logout" type="danger" class="info" >Logout</el-button>
     </view>
   </view>
 </div>
</template>

<script>
import config from '../../config'
export default {
  data() {
    return {
      user: {
        nickName: '',
        email: 'john@example.com',
        phone: '123-456-7890',
        avatarUrl: '/static/images/tabs/doctor-actives.png',
      },
    };
  },
  methods: {
    logout() {
      // 实现用户退出逻辑
      // 例如，清除本地缓存，跳转到登录页面等
      console.log('User logged out');

    },
    handleGetUserInfo(res){
        const loginUrl=config.loginUrl
      let currentUser = res.target.userInfo;
      wx.login({
        success(res) {
          if(res.code){
            wx.request({
              method: 'POST',
              url:loginUrl,
              data:{
                code:res.code
              },
              success(loginRes){
                console.log(res);
                currentUser['openId']= JSON.parse(loginRes.data.data)['openid'];
                wx.setStorage({
                  key:"userInfo",
                  data:JSON.stringify(currentUser)
                })
              }
            })
          }
        }
      })
      if(res.mp.detail.userInfo){
        this.user=res.mp.detail.userInfo
        console.log(this.user.nickName)
      }

    }
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #personalContainer
    font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
    font-weight 600
    .my-profile
      width 100%
      height 100%
      padding-bottom: 10px
      background-color: rgba(255, 255, 255, 0.8)
      border-radius: 10px
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)

    .profile-header
      text-align: center
      margin-bottom: 20px


    .avatar
      padding-top 20px
      width: 100px
      height: 100px
      border-radius: 50%

    .username
      padding-top 20px
      display block
      font-size: 18px
      margin-top: 10px

    .profile-content
      font-size: 16px

    .info-container
      border-radius 5px
      border: 1px solid #ddd
      padding: 10px 0
      margin-bottom 1px
      margin-top 1px
      background-color white
      width 100%


    .info
      padding-left 4px
      height 30px
      line-height 30px
      display block
      margin-bottom 10px

  .niceButton2{
    position: relative;
    background-color: rgb(32, 93, 224);
    border: none;
    font-size: 28px;
    color black
    padding: 20px;
    text-align: center;
    transition-duration: 0.6s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
  }
  .niceButton2::after{
    content: '';
    background:#53a4f0;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition:all 0.8s;
  }
  .niceButton2:active::after{
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s;
  }


</style>
